<template>
  <div class="list-container list-containerUserDetail">
     <div class='topbar clearfix'>
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{path:'/userManager/userManager'}">用户管理</el-breadcrumb-item>
              <el-breadcrumb-item class="secFont" :to="{path:'/userManager/userManager'}" >用户列表</el-breadcrumb-item>
              <el-breadcrumb-item style="font-size: 12px;color: #777777 !important;line-height:15px">用户详情</el-breadcrumb-item>
          </el-breadcrumb>
    </div>
    <div class="nav clearfix">
          <div class="left">
              <img src="../../img/peopleImg.png" v-if="detalData.headImgUrl==null"/>
              <img v-else :src="detalData.headImgUrl" />
          </div>
          <div class="right">
               <div class="userName">用户名：{{detalData.nickName}}</div>
               <div class="userDetail clearfix" v-if="detalData.memberFlag==1">
                  <div class="imgVip">会员VIP</div>
                  <p class="p">会员到期时间：{{detalData.memberExpiredTime | changeTimeDate}}</p>
               </div>
               <p class="font">性别：{{detalData.sex==1?'男':detalData.sex==2?'女':'未知'}}</p>
               <p class="font">注册日期：{{detalData.ctime | changeTimeDate}}</p>
               <p class="font fontLan">手机号：{{detalData.phone}}</p>
          </div>
    </div>
  </div>
</template>

<script>
import api from "@/fetch/url";
import {FormatDate,transformPrice} from '@/utils/index.js'
export default {
  data() {
    return {
        id:this.$route.params.id,
        detalData:""
    }
  },
  created() {
    this.init();
  },
   methods: {
     init(){
            // api.customerDetail
            api.customerDetail({},this.id).then(json => {
                //  console.log(json,8888888);
                 this.detalData=json;
              });
     },
   },
   filters:{
     changeTimeDate(time){
       if(time!=null){
          let timeDate = FormatDate(new Date(Number(time)), 'yyyy-MM-dd');
          return timeDate;
       }
       return "";
     }
   }
}
</script>
<style lang='scss'>
.list-container .topbar .el-breadcrumb .secFont .el-breadcrumb__inner a, .list-container .topbar .el-breadcrumb .secFont .el-breadcrumb__inner.is-link {
    font-size: 12px;color: #777777 !important;line-height:18px
}
</style>
<style lang="scss" scoped>
.list-containerUserDetail {
  .nav {
     width:100%;
    //  height:240px;
     border: 1px solid #EEEEEE;
     padding:20px 30px;
     box-sizing:border-box;
     .left {
       float: left;
       hieght:100%;
       img {
         display: block;
         width:110px;
         height:110px;
       }
     }
     .right {
       float: left;
       margin-left:20px;
       padding-top:20px;
       .userName{
             font-size: 18px;
             color: rgb(38, 38, 38);
       }
       .userDetail {
         padding-top:10px;
         padding-bottom:30px;
          .imgVip {
            float: left;
            margin-right: 20px;
            // margin-top: 8px;
            background: url(https://cdn.yueyangshuyuan.com/%E4%BC%9A%E5%91%98%E5%BA%95%E8%89%B2.png) no-repeat;
            width: 52px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            font-size: 12px;
            color: #FFFFFF;
          }
          .p {
            float: left;
            width:300px;
            font-size:14px;
            color:#777;
            line-height:24px;
          }
       }
       .font {
           padding:10px 0;
           box-sizing:border-box;
            font-size:14px;
            color:#777;
       }
       .fontLan {
         padding-bottom:0;
       }
     }
  }
}
</style>
